/**
 * Created by luojie on 2018/3/13.
 */

import "../css/my-memeber.scss";
import Layout from "../components/layout";
import MemberApply from "../components/memberApply";
import MemberApplyList from "../components/memberApplyList";
import BuyList from "./buyList";
import api from "../utils/api";

const memberBg1 = require("../images/member-bg1.png");
const boll1 = require("../images/boll1.png");
const boll2 = require("../images/boll2.png");
const boll3 = require("../images/boll3.png");

// const openid = "olsJCwx-pWEkoeIn9Hk4dD8J6SnE";
const openid = getCookie("openid");

export default class MyMember extends React.PureComponent {
	constructor(props) {
		super(props);
		this.state = {
			tabList: [
				{ name: "购买会员卡" },
				{ name: "已购会员卡" },
			],
			memberList: [
			],
			activeIndex: 0,
			showOrder: false,
			classLists: []

		};
		this.checkOrder = this.checkOrder.bind(this);
		this.closeBuyList = this.closeBuyList.bind(this);
	}
	componentWillMount() {
		// this.getMemberList();
		this.getBuyVipLists()
	}
	getMyBoughtClass(vipId) {
		let { classLists } = this.state
		ajax(api.myBoughtClass, {vipId}, "post").then((res) => {
			if (res.status === 1) {
				this.setState({ classLists: res.datas })
			}
		});
	}
	getBuyVipLists() {
		let { memberList } = this.state
		ajax(api.findApply, { openid}, "post").then((res) => {
			if (res.status === 1) {
				memberList = res.datas
				this.setState({ memberList })
			}
		});
	}
	getMemberList() {
		ajax(api.getVipList, { openid}, "post").then((result) => {

		});
	}
	tabChange(index) {
		if(index === 1){
			this.getBuyVipLists();
		}
		this.setState({
			activeIndex: index,
		})
	}
	checkOrder(vipId) {
		this.setState({
			showOrder: true,
		});
		this.getMyBoughtClass(vipId)
	}
	closeBuyList() {
		this.setState({
			showOrder: false,
		});
	}
	render() {
		let { tabList, activeIndex, showOrder, memberList, classLists } = this.state;
		return (
			<Layout {...this.props}>
				<div className="my-member">
					<div className="my-member">
						<div className="my-member-tab">
							{
								tabList.map((item, index) => {
									return (
										<div className={"tab-row"} key={`tab${index}`}>
											<button
												onClick={this.tabChange.bind(this, index)}
												className={activeIndex === index ? "tab-btn active" : "tab-btn"}>{item.name}</button>
										</div>
									)
								})
							}
						</div>
						<img className="tab-img1" src={memberBg1} alt="" />
						<img className="tab-boll3" src={boll3} alt="" />
						{

						}
						<div className="my-member-form">
							{
								activeIndex === 0 ?
									<MemberApply {...this.props} />
									:
									<MemberApplyList list={memberList} onClick={this.checkOrder} />
							}
							<img className="tab-boll1" src={boll1} alt="" />
						</div>
					</div>
					<img className="tab-boll2" src={boll2} alt="" />
				</div>
				<BuyList
					onClose={this.closeBuyList}
					show={showOrder}
					dataLists={classLists}
				/>
			</Layout>
		)
	}
}